<template>
    <div class="formtable">
        <el-dialog title="商品列表" width="76%" :visible.sync="tables.dialogTableVisible">
        <p class="shop_p">
            <span class="s1">
                    商品分类：
                    <el-select clearable size="small" @change="selsFun" v-model="value" placeholder="请选择">
                        <el-option
                        v-for="(v,i) in options"
                        :key="i"
                        :label="v | seles"
                        :value="v.id">
                        </el-option>
                    </el-select>
                </span>
                <span class="s2">
                    <span>商品搜索：</span>
                    <el-input size="small" class="inps" v-model="input" placeholder="请输入商品名称，关键字，编号"></el-input>
                    <el-button size="small" type="primary" @click="inputFun" icon="el-icon-search"></el-button>
                </span>
        </p>
        <el-table
            v-loading='loading'
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            >
            <el-table-column
            label="#"
            width="50">
                <template slot-scope="scope">
                    <el-radio v-model="radio" @change="radioFun(scope.row)" :label="scope.row.id">{{ }}</el-radio>
                </template>
            </el-table-column>
            <el-table-column
            label="商品ID"
            width="70">
            <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
            label="图片"
            width="120">
                <template slot-scope="scope">
                    <img :src="scope.row.image" style="width:50px;height:50px;" alt="">
                </template>
            </el-table-column>
            <el-table-column
            prop="store_name"
            label="商品名称"
            width="120">
            </el-table-column>
            <el-table-column
            prop="cate_name"
            label="商品分类"
            show-overflow-tooltip>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
            <el-pagination
                @current-change="handleCurrentChange"
                @prev-click="prevFun"
                @next-click='nextFun'
                :current-page="page"
                :page-size="limit"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-dialog>
    </div>
</template>

<script>
import {writerguan,writertable,writerlian} from '../../api/content/books'
export default {
    props:['tables','ids'],
    filters:{
        seles(val){
            return `${val.html}${val.cate_name}`
        }
    },
    data () {
        return {
            loading:true,
            radio:'',
            value:'',
            input:'',
            options:[],
            tableData: [],
            multipleSelection: [],
            page:1,
            limit:5,
            total:0,
            id:''
        }
    },
    methods:{
        //单选框点击
        radioFun(){
            // console.log(this.radio);
            // console.log(this.id);
            writerlian({ids:this.id,product_id:this.radio}).then(res => {
                console.log(res.data);
                if (res.data.status == 200) {
                    this.$message.success('关联成功')
                    this.tables.dialogTableVisible = false
                    this.$emit('disVal',this.tables.dialogTableVisible)
                }else{
                    this.$message.error('关联失败')
                }
            },err => {
                console.log(err);
            })
        },
        inputFun(){
            this.loading = true;
            this.joint();
        },
        joint(){
            writertable({page:this.page,limit:this.limit,ids:this.value,name:this.input}).then(res => {
                //console.log(res.data);
                if (res.data.status === 200) {
                    this.tableData = res.data.data.list;
                    this.total = res.data.data.count;
                    this.loading = false;
                }
            },err => {
                console.log(err);
            })
        },
        selsFun(){
            this.loading = true;
            this.joint();
        },
        handleCurrentChange(val) {
            this.page = val
            this.joint();
        },
        prevFun(val) {
            this.page = val
            this.joint();
        },
        nextFun(val) {
            this.page = val
            this.joint();
        },
    },
    watch:{
        "ids.id"(val){
            this.id = val
        }
    },
    created(){
        
        this.joint();
        //下拉请求
        writerguan().then(res => {
            //console.log(res.data);
            if (res.data.status === 200) {
                this.options = res.data.data
            }
        },err => {
            console.log(err);
        })

        
    }
    
}
</script>

<style lang="scss">
    .shop_p{
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .s1{
            display: block;
            width: 44%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .s2{
            display: block;
            width: 40%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            span{
                white-space: nowrap;
            }
        }
    }
</style>